/**
 * image组件的使用
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    PixelRatio,
    Image,
    TouchableHighlight,

} from 'react-native';
import BaseComponent from './BaseComponent';
var imgs=[
    'https://www.baidu.com/img/bd_logo1.png',
    'https://gss1.bdstatic.com/5eN1dDebRNRTm2_p8IuM_a/res/img/xiaoman2016_24.png',
    'http://ts.zhaopin.com/jump/img/kh.jpg'
];


class ImageDemo extends BaseComponent{
    render(){
        return(
            <View style={[{flex:1},{marginTop:45}]}>
                <MyImage imgs={imgs} >

                </MyImage>
            </View>
        );
    }
}

class MyImage extends Component {

    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            count:0,
            imgs:this.props.imgs,
        };
      }

    nextiamge(){

        var count=this.state.count;
        count++;
        if(count<this.state.imgs.length){
            this.setState({
                count:count,
            });
        }else {
            this.setState({
                count:0,
            });
        }

    }

    shangimage(){

        var count=this.state.count;
        count--;
        if(count>=0){
            this.setState({
                count:count,
            });
        }else {
            this.setState({
                count:this.state.imgs.length-1,
            });
        }
    }

    render() {
        return (
            <View style={[styles.viewflex,{alignItems:'center'}]}>
                <View style={styles.image}>
                    <Image  style={styles.myiamge} resizeMode='contain' source={{uri:this.state.imgs[this.state.count]}}></Image>
                </View>

                <View style={styles.flex}>
                    <TouchableHighlight onPress={this.nextiamge.bind(this)} style={styles.viewtext} underlayColor='#E1F6FF'>
                        <Text style={styles.textfont}>下一张</Text>
                    </TouchableHighlight>

                    <TouchableHighlight onPress={this.shangimage.bind(this)} style={styles.viewtext} underlayColor='#E1F6FF'>
                        <Text style={styles.textfont}>上一张</Text>
                    </TouchableHighlight>
                </View>
            </View>



        );
    }
}

const styles = StyleSheet.create({

    textfont:{
        fontSize:16,
    },

    viewtext:{
      marginRight:10,
      marginLeft:10,
      width:80,
      height:40,
      borderRadius:5,
      borderWidth:1,
      borderColor:'#ff0000',
        alignItems:'center',
        justifyContent:'center',
    },
    viewflex:{
        flex:1,
        marginTop:10,
    },

    flex:{
        marginTop:10,
        flexDirection:'row',
    },
    myiamge:{
        width:280,
        height:180
    },
    image:{
        borderWidth:1,
        width:300,
        height:200,
        borderRadius:5,
        borderColor:'#ccc',
        justifyContent:'center',
        alignItems:'center',
    }
});
module.exports=ImageDemo;